<template>
    <div class="log-container">
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="日志编辑" style="position: relative;top: 10px;left: 5px;">
            </el-page-header>
        </div>
        <el-divider></el-divider>

        <div class="form">
            <el-header class="title" style="position: relative;top: 20px;font-size: 30px">
                <i class="el-icon-user-solid">日志编辑</i>
            </el-header>
            <el-divider></el-divider>
            <el-form :model="logJob" label-width="100px" label-position="top" style="margin-left: 50px">
                <el-container>
                    <!--父类型-->
                    <el-form-item label="日志类型：">
                        <el-select v-model="logJob.parent" @change="getChildrenList" :value="logJob.parent"
                                   style="width: 500px;" :disabled="!checkRoute">
                            <el-option value="" label="请选择"></el-option>
                            <el-option
                                    :key="parent.id"
                                    v-for="parent in parentList"
                                    :value="parent.id"
                                    :label="parent.logTypeLogname"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <!--子类型-->
                    <el-form-item label="详细类型：" style="margin-left: 30px">
                        <el-select v-model="logJob.logtypeId" :value="logJob.logtypeId" style="width: 500px;">
                            <el-option value="" label="请选择"></el-option>
                            <el-option
                                    :key="children.id"
                                    v-for="children in childrenList"
                                    :value="children.id"
                                    :label="children.logTypeLogname"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="案件："
                                  v-if="(((checkRoute && checkCaseLawId) || checkClientAndCase) && logJob.parent!=1004 && logJob.parent!=1003) || (logJob.parent!=1004 && logJob.parent!=1003)">
                        <el-input v-model="logJob.caseNo" @focus="handleOpenLaw" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="客户："
                                  :class="{'transfer':(((checkRoute && checkCaseLawId) || checkClientAndCase) && logJob.parent!=1004 && logJob.parent!=1003) || (logJob.parent!=1004 && logJob.parent!=1003)}"
                                  v-if="logJob.parent!=1004">
                        <el-select v-model="logJob.clientId" :value="logJob.clientId" style="width: 500px;"
                                   :disabled="!checkRoute || logJob.parent!=1003">
                            <el-option
                                    v-for="client in clientList"
                                    :value="client.id"
                                    :label="client.client"
                                    :key="client.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="时间区间：">
                        <el-date-picker
                                style="width: 500px;"
                                v-model="dateArray"
                                type="daterange"
                                align="right"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                @change="handleChangeDate"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="公开状态：" style="margin-left: 30px">
                        <el-select v-model="logJob.joblogStatus" :value="logJob.joblogStatus" style="width: 500px;">
                            <el-option value="Y" label="公开"></el-option>
                            <el-option value="N" label="不公开"></el-option>
                        </el-select>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="相关文件：">
                        <el-upload
                                name="multipartfile"
                                action="http://localhost/upload"
                                :headers="{token:this.$store.state.token}"
                                :data="{folder:'log'}"
                                class="upload-demo"
                                ref="upload"
                                :limit="1"
                                :multiple="false"
                                :auto-upload="false"
                                :on-success="handleUploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                上传到服务器
                            </el-button>
                        </el-upload>
                    </el-form-item>
                    <el-input v-model="logJob.joblogFile" v-show="false"></el-input>
                </el-container>

                <el-container>
                    <el-form-item label="文本：">
                        <el-input v-model="logJob.joblogText" type="textarea" style="width: 1000px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmit">确定提交</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
        </div>

        <el-dialog
                :visible.sync="centerDialogVisible"
                width="70%"
                center>
            <chose-case @setLaw="handleSetLaw"></chose-case>
        </el-dialog>
    </div>
</template>

<script>
    //引入组件
    const ChoseCase = () => import('../../common/Case/ChoseCase.vue')
    //引入服务类
    import {LogTypeService} from "../../../model/gs/LogTypeService";
    import ClientService from '../../../model/gs/ClientService.js'
    import {LogJobService} from "../../../model/gs/LogJobService";

    const logTypeService = LogTypeService.getInstance()
    const clientService = ClientService.getInstance()
    const logJobService = LogJobService.getInstance()

    export default {
        data() {
            return {
                centerDialogVisible: false,
                logJob: {
                    logtypeId: '',
                    caseLawId: '',
                    caseNo: '',
                    clientId: '',
                    joblogStatus: 'N',
                    parent: ''
                },
                parentList: [],
                childrenList: [],
                clientList: [],
                dateArray: [],
                //时间校验配置
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        },
        methods: {
            handleOpenLaw() {
                this.centerDialogVisible = true
            },
            handleSetLaw(law) {
                this.logJob.caseNo = law.caseNo
                this.logJob.caseLawId = law.id
                this.logJob.clientId = law.clientId
                this.centerDialogVisible = false
            },
            goBack() {
                history.back()
            },
            //查询父类型
            getParentList() {
                logTypeService.getParentList().then(response => {
                    if (response.data.code === 0) {
                        this.parentList = response.data.data
                    }
                })
            },
            //查询子类型
            getChildrenList(pid) {
                logTypeService.getByParent(pid).then(response => {
                    if (response.data.code === 0) {
                        this.childrenList = response.data.data
                        this.logJob.caseLawId = ''
                        if (this.checkRoute && this.logJob.id==null) {
                            this.logJob.clientId = ''
                        }
                    }
                })
            },
            //获取客户
            getClientList() {
                clientService.list().then(response => {
                    if (response.data.code === 0) {
                        this.clientList = response.data.data
                    }
                })
            },
            handleChangeDate() {
                if (this.dateArray != undefined) {
                    this.logJob.joblogStarttime = this.dateArray[0]
                    this.logJob.joblogEnddtime = this.dateArray[1]
                } else {
                    this.logJob.joblogStarttime = ''
                    this.logJob.joblogEnddtime = ''
                }
            },
            //上传成功的回调
            handleUploadSuccess(response) {
                this.logJob.joblogFile = response.data
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleSubmit() {
                const flag = (((this.checkRoute && this.checkCaseLawId) || this.checkClientAndCase) && this.logJob.parent!=1004 && this.logJob.parent!=1003) || (this.logJob.parent!=1004 && this.logJob.parent!=1003)
                //校验
                if (!logJobService.check(this.logJob, flag)) {
                    return
                }
                //提交
                if (this.checkLogRoute) {
                    logJobService.save(this.logJob).then(response => {
                        if (response.data.code === 0) {
                            this.$message.success({
                                message: '提交成功',
                                duration: 1000
                            })
                            //判断是否是路由跳过来的
                            if (!this.checkRoute) {
                                history.back()
                            } else {
                                this.logJob = {
                                    logtypeId: '',
                                    caseLawId: '',
                                    caseNo: '',
                                    clientId: '',
                                    status: 'N',
                                }
                            }
                        }
                    })
                } else {
                    logJobService.update(this.logJob).then(response => {
                        if (response.data.code === 0) {
                            this.$message.success({
                                message: '修改成功',
                                duration: 1000
                            })
                            history.back()
                        }
                    })
                }
            }
        },
        created() {
            this.getParentList()
            this.getClientList()
            //判断是否存在路由传递的数据
            if (!this.checkRoute) {
                const client = this.$route.params.client
                this.$set(this.logJob, 'clientId', client.id)
                this.logJob.parent = 1003
                this.getChildrenList(this.logJob.parent)
            }
            if (!this.checkLogRoute) {
                const logJob = this.$route.params.logJob
                this.logJob = logJob
                this.logJob.parent = logJob.pid
                this.getChildrenList(this.logJob.parent)
                this.dateArray.push(logJob.joblogStarttime, logJob.joblogEnddtime)
            }
        },
        computed: {
            checkRoute: {
                get() {
                    return this.$route.params.client == null;
                }
            },
            checkLogRoute: {
                get() {
                    return this.$route.params.logJob == null;
                }
            },
            checkCaseLawId: {
                get() {
                    return this.$route.params.logJob != null && this.$route.params.logJob.caseLawId != null && this.$route.params.logJob.caseLawId != ''
                }
            },
            checkClientAndCase: {
                get() {
                    return Object.keys(this.$route.params).length == 0
                }
            }
        },
        components: {
            ChoseCase
        }
    }
</script>

<style scoped>
    .transfer {
        margin-left: 30px;
    }
</style>
